<template>
<div>
  <p>{{message.date}}</p>
  <el-row >
    <el-col>
      <el-avatar :style="message.position===1?right:left" :src="message.imgUrl"></el-avatar>
      <div class="text" :style="message.position===1?right:left">
        {{message.message}}
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "chartItem",
  data(){
    return{
      right:{
        float:'right'
      },
      left:{
        float: 'left'
      }
    }
  },
  props:{
    message:{
      type:Object
    }
  }
}
</script>

<style scoped>
.text{
  text-align: left;
  max-width: 300px;
  margin: 10px 10px 0 10px;
  background-color: #b8d6fc;
  border-radius: 6px;
}
</style>